<template>
  <view class="tab-bar">
    <view
      v-for="tab in tabs"
      :key="tab.key"
      :class="tabItemClass(tab)"
      @click="handleTabClick(tab)"
    >
      <!-- 图标 -->
      <view class="tab-icon">
        <BaseIcon
          :name="isActive(tab.key) ? tab.activeIcon : tab.icon"
          :size="iconSize"
          :color="isActive(tab.key) ? 'var(--novel-primary)' : 'var(--text-muted)'"
        />

        <!-- 徽章 -->
        <BaseBadge
          v-if="tab.badge"
          :value="tab.badge"
          :type="isActive(tab.key) ? 'primary' : 'default'"
          size="small"
          class="tab-badge"
        />
      </view>

      <!-- 文字 -->
      <text class="tab-text">{{ tab.title }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from '@/utils/router'
import BaseIcon from '../ui/BaseIcon.vue'
import BaseBadge from '../ui/BaseBadge.vue'

interface TabItem {
  key: string
  title: string
  icon: string
  activeIcon: string
  path: string
  badge?: number | string
}

interface Props {
  // Tab配置
  tabs: TabItem[]
  // 当前激活的Tab
  activeKey?: string
  // 图标尺寸
  iconSize?: number | 'small' | 'medium' | 'large'
  // 自定义类名
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  activeKey: '',
  iconSize: 'medium',
  customClass: '',
})

const emit = defineEmits<{
  change: [tab: TabItem]
}>()

const route = useRoute()

// 计算当前激活的Tab
const currentActiveKey = computed(() => {
  return props.activeKey || getActiveKeyFromRoute()
})

// 从路由获取激活的Tab
const getActiveKeyFromRoute = () => {
  const currentPath = route.path
  const activeTab = props.tabs.find(tab => tab.path === currentPath)
  return activeTab?.key || props.tabs[0]?.key || ''
}

// 判断Tab是否激活
const isActive = (key: string) => {
  return currentActiveKey.value === key
}

// Tab项样式
const tabItemClass = (tab: TabItem) => {
  const baseClass = 'tab-item'

  const activeClass = isActive(tab.key) ? 'tab-item-active' : ''

  return [baseClass, activeClass].filter(Boolean).join(' ')
}

// 处理Tab点击
const handleTabClick = (tab: TabItem) => {
  if (isActive(tab.key)) return

  emit('change', tab)

  // 跳转到对应页面
  if (typeof uni !== 'undefined') {
    uni.switchTab({
      url: tab.path,
      fail: () => {
        // 如果不是tabBar页面，使用navigateTo
        uni.navigateTo({
          url: tab.path,
        })
      }
    })
  }
}
</script>

<style scoped>
.tab-bar {
  @apply fixed bottom-0 left-0 right-0 bg-bg-medium border-t border-custom;
  @apply flex items-center justify-around;
  @apply safe-area-bottom pb-sm;
  height: 120rpx;
  z-index: var(--z-index-fixed);
}

.tab-item {
  @apply flex flex-col items-center justify-center;
  @apply flex-1 h-full transition-all duration-200;
  @apply cursor-pointer;
}

.tab-item-active {
  .tab-text {
    color: var(--novel-primary);
    font-weight: 600;
  }
}

.tab-icon {
  @apply relative mb-1;
}

.tab-badge {
  @apply absolute -top-1 -right-1;
}

.tab-text {
  @apply text-xs text-text-muted transition-colors duration-200;
  font-size: 20rpx;
}
</style>